import React from "react";
import PropTypes from "prop-types";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import { Row, Col, Button, Form, Select, Input, DatePicker, Modal } from "antd";
import { filterState, filterMediumType } from "utils/filter";
import moment from "moment";
import { formatDate } from "utils";

const { RangePicker, MonthPicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
};
const dateFormat = "YYYY-MM-DD";
let timeStart = "";
let timeEnd = "";
const CheckingModal = ({
  form: { validateFields, getFieldsValue, getFieldDecorator },
  currentItem,
  onOk,
  onCancel,
  ...modalProps
}) => {
  const {
    mediumType,
    borrowUserName,
    borrowReason,
    contactWay,
    borrowEndAt,
    borrowStartAt,
    borrowStartTime,
    borrowEndTime,
    id,
    documentId,
    renewReason,
    renewTime,
    borrowId
  } = currentItem;
  const handleSubmit = e => {
    if (timeStart == "" || timeEnd == "") {
      timeStart = formatDate(borrowStartAt);
      timeEnd = formatDate(borrowEndAt);
    }
    validateFields((err, values) => {
      if (!err) {
        const params = {
            id:borrowId,
            state:1,
            borrowAuditOpinion: values['borrowAuditOpinion']
        };
        onOk(params);
      }
    });
  };
  const handleSubmit1 = e => {
    if (timeStart == "" || timeEnd == "") {
      timeStart = formatDate(borrowStartAt);
      timeEnd = formatDate(borrowEndAt);
    }
    validateFields((err, values) => {
      if (!err) {
        const params = {
            id:borrowId,
            state:2,
        };
        onCancel(params);
      }
    });
  };  

  const onChange = (date, dateString) => {
    if (date && dateString) {
      timeStart = dateString[0];
      timeEnd = dateString[1];
    }
  };
  const props = {
    onOk: handleSubmit,
    onCancel:handleSubmit1,
    ...modalProps
  };
  return (
    <Modal {...props}>
      <Form>
        <FormItem {...formItemLayout} label="借阅方式">
          {getFieldDecorator("mediumType", {
            initialValue: filterMediumType(mediumType)
          })(<Input disabled />)}
        </FormItem>
        <FormItem {...formItemLayout} label="联系方式">
          {getFieldDecorator("contactWay", { initialValue: contactWay })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅人">
          {getFieldDecorator("borrowUserName", {
            initialValue: borrowUserName
          })(<Input disabled />)}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅时间">
          {getFieldDecorator("range-picker", {
            initialValue: [
              moment(formatDate(borrowStartTime), dateFormat),
              moment(formatDate(borrowEndTime), dateFormat)
            ]
          })(<RangePicker onChange={onChange} disabled/>)}
        </FormItem>
        <FormItem {...formItemLayout} label="续借时间">
          {getFieldDecorator("renewTime",{
              initialValue: moment(renewTime)
          })(
            <DatePicker 
              style={{width:"100%"}}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              disabled
            />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="续借原因">
          {getFieldDecorator("borrowReason", { initialValue: renewReason?renewReason:'' })(
            <TextArea rows={4} disabled />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="审核意见">
          {getFieldDecorator("borrowAuditOpinion")(
            <TextArea rows={4} />
          )}
        </FormItem>
      </Form>
    </Modal>
  );
};

CheckingModal.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default Form.create()(CheckingModal);
